<template>
  <div class="index-container">
        <el-row>
          <template>
            <el-button type="primary" style="margin-bottom:10px" size="mini" @click="addOneInit">新增一级菜单</el-button>
            <vxe-table
              ref="xTree"
              border
              show-overflow
              size="mini"
              :height="tableHeight"
              :data="menus"
              :tree-config="{ children: 'list', iconOpen: 'el-icon-remove', iconClose: 'el-icon-circle-plus' }"
            >
              <vxe-table-column type="seq" width="180" title="序号" tree-node />
              <vxe-table-column field="no" title="菜单编号" />
              <vxe-table-column field="title" title="菜单名称" />
              <vxe-table-column field="type" title="菜单类型">
                <template v-slot="{ row }">
                  {{ row.type == 1 ? '单表' : row.type == 2 ? '主子表' : row.type == 3 ? '树形分类单表' : row.type == 4 ? '订单表' : '自定义' }}
                </template>
              </vxe-table-column>
              <vxe-table-column field="href" title="菜单url" />
              <vxe-table-column field="icon" title="图标">
                <template v-slot="{ row }">
                  <i :class="'iconfont ' + row.icon" />
                </template>
              </vxe-table-column>
              <vxe-table-column field="seq_num" title="排序号" />
              <vxe-table-column title="操作" show-overflow show-header-overflow width="200" fixed="right">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="edit(scope.row)" />
                  <el-button type="success" size="mini" icon="el-icon-plus" @click="addSon(scope.row)">子菜单</el-button>
                  <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="del(scope.row)" />
                </template>
              </vxe-table-column>
            </vxe-table>
          </template>
        </el-row>
      <!-- 新增dialog -->
      <vxe-modal id="coder_menuDialog" v-model="show" :title="dialogTitle" width="600" show-footer show-zoom resize remember storage transfer>
        <template #default>
          <el-row :gutter="4">
            <el-form ref="form" :rules="rules" size="small" :model="form" label-width="100px">
              <el-col v-if="add" :span="12">
                <el-form-item label="菜单编号" prop="no" :label-width="formLabelWidth"><el-input v-model="form.no" /></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单名称" prop="title" :label-width="formLabelWidth"><el-input v-model="form.title" /></el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="菜单类型" prop="type" :label-width="formLabelWidth">
                  <el-radio v-model="form.type" :label="1">单表</el-radio>
                  <el-radio v-model="form.type" :label="2">主子表</el-radio>
                  <el-radio v-model="form.type" :label="3">树形分类单表</el-radio>
                  <el-radio v-model="form.type" :label="4">订单表</el-radio>
                  <el-radio v-model="form.type" :label="5">自定义</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  v-if="form.type != 5"
                  label="主数据模型"
                  prop="data_object_no"
                  :label-width="formLabelWidth"
                  :rules="[{ required: true, message: '请选择主数据模型', trigger: 'blur' }]"
                >
                  <el-select v-model="form.data_object_no" style="width: 100%;" filterable placeholder="请选择">
                    <el-option v-for="item in objects" :key="item.no" :label="item.cn" :value="item.no" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  v-if="form.type == 2 || form.type == 4 || form.type == 3"
                  label="主数据ID"
                  prop="parent_id_field"
                  :label-width="formLabelWidth"
                  :rules="[{ required: true, message: '请填写主数据ID', trigger: 'blur' }]"
                >
                  <el-input v-model="form.parent_id_field" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  v-if="form.type == 2 || form.type == 4 || form.type == 3"
                  label="子数据模型"
                  prop="son_data_object_no"
                  :label-width="formLabelWidth"
                  :rules="[{ required: true, message: '请选择子数据模型', trigger: 'blur' }]"
                >
                  <el-select v-model="form.son_data_object_no" style="width: 100%;" filterable placeholder="请选择">
                    <el-option v-for="item in objects" :key="item.no" :label="item.cn" :value="item.no" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  v-if="form.type == 2 || form.type == 4 || form.type == 3"
                  label="子关联ID"
                  prop="son_id_field"
                  :label-width="formLabelWidth"
                  :rules="[{ required: true, message: '请填写子关联ID', trigger: 'blur' }]"
                >
                  <el-input v-model="form.son_id_field" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  v-if="form.type == 3"
                  label="树单父节点字段"
                  prop="tree_parent_no"
                  :label-width="formLabelWidth"
                  :rules="[{ required: true, message: '请填写树单表显示字段', trigger: 'blur' }]"
                >
                  <el-input v-model="form.tree_parent_no" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  v-if="form.type == 3"
                  label="树单表显示字段"
                  prop="tree_field"
                  :label-width="formLabelWidth"
                  :rules="[{ required: true, message: '请填写树单表显示字段', trigger: 'blur' }]"
                >
                  <el-input v-model="form.tree_field" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="form.type == 3" label="树单表多选" prop="tree_multiple" :label-width="formLabelWidth">
                  <el-switch v-model="form.tree_multiple" active-color="#13ce66" inactive-color="#ff4949" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单链接" prop="component" :label-width="formLabelWidth"><el-input v-model="form.component" /></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单排序" prop="seq_num" :label-width="formLabelWidth"><el-input v-model="form.seq_num" /></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单图标" prop="icon" :label-width="formLabelWidth"><el-input v-model="form.icon" /></el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </template>
        <template #footer>
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
        </template>
      </vxe-modal>
      <!-- 新增dialog -->
  </div>
</template>

<script>

window.onresize = function() {
  this.app.fullHeight = document.documentElement.clientHeight // 窗口高度
}

import { getTreeMenu, menuAddOrEdit, menuDel } from '@/api/coder/menu'
import { getObjects } from '@/api/coder/data'
import { mapGetters } from 'vuex'

export default {
  name:'Menu',
  computed: {
    ...mapGetters({userinfo:'user/userinfo'})
  },
  data() {
    return {
      menus: [],
      fullHeight: document.documentElement.clientHeight,
      tableHeight: 0,
      show: false,
      add: true,
      form: { type: 1 },
      formLabelWidth: '120px',
      objects: [],
      dialogTitle: '',
      rules: {
        title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        no: [{ required: true, message: '请输入菜单编号', trigger: 'blur' }],
        seq_num: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      }
    }
  },
  watch: {
    fullHeight() {
      this.tableHeight = this.fullHeight - 285
    },
    menus() {
      this.$nextTick(() => {
        this.tableHeight = this.fullHeight - 285
      })
    }
  },
  created() {
    this.getMenus()
    this.getObjects()
  },
  methods: {
    getMenus() {
      return new Promise((resolve, reject) => {
        getTreeMenu()
          .then(res => {
            this.menus = res.list
            resolve(res)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
    getObjects() {
      return new Promise((resolve, reject) => {
        getObjects()
          .then(res => {
            this.objects = res.list
            resolve(res)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
    addOneInit() {
      this.dialogTitle = '新增一级菜单'
      this.form.parent_menu = 0
      this.add = true
      this.show = true
    },
    edit(row) {
      this.dialogTitle = '编辑'
      this.form = row
      this.add = false
      this.show = true
    },
    addSon(row) {
      this.dialogTitle = '新增子菜单'
      this.form.parent_menu = row.id
      this.add = true
      this.show = true
    },
    handleClose(done) {
      this.show = false
      this.form = { type: 1 }
      done()
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          return new Promise((resolve, reject) => {
            menuAddOrEdit(this.form)
              .then(res => {
                this.getMenus()
                this.show = false
                this.form = { type: 1 }
                resolve(res)
              })
              .catch(error => {
                reject(error)
              })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    del(row) {
      this.$confirm('该菜单及下级所有菜单都将删除，请确认?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return new Promise((resolve, reject) => {
          menuDel(row.id, this.userinfo.region)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.getMenus()
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      })
    }
  }
}
</script>

<style></style>
